<template>
	<view class="page">
		<uni-nav-bar fixed="true" @clickLeft="back" backgroundColor="#6869a8" height="120rpx" statusBar="true">
			<view style="font-size: 37rpx; margin: auto;">
				<text style="color: #FFF;">个人资料</text>
			</view>
			<view slot="left">
				<uni-icons type="back" size="30" color="#FFF"></uni-icons>
			</view>
		</uni-nav-bar>
		<view class="infoCard">
			<view class="item">
				<image :src="user.avatar" mode="aspectFill" class="image"></image>
			</view>
			<view class="item">
				<text class="username">{{user.username}}</text><br />
				<text class="id">ID: {{user.id}}</text>
			</view>
		</view>
		<view style="margin: 30rpx 60rpx;">
			<view class="info">
				<uni-icons type="person" size="30"></uni-icons> 性别: <text class="t">{{getSex(user.sex)}}</text>
			</view>
			<view class="info">
				<uni-icons type="star" size="30"></uni-icons> 年龄: <text class="t">{{getAge(user.birth)}}</text>
			</view>
			<view class="info">
				<uni-icons type="gift" size="30"></uni-icons> 生日: <text class="t">{{getBirth(user.birth)}}</text>
			</view>
			<view class="info">
				<uni-icons type="location" size="30"></uni-icons> 位置: <text
					class="t">{{getLocation(user.location)}}</text>
			</view>
		</view>
		<view class="footer">
			<view class="" v-if="isFriend">
				<view class="button delete width_30" hover-class="delete_hover" @click="isDel = true">删除好友</view>
				<view class="button send width_30" hover-class="send_hover" @click="send">发消息</view>
			</view>
			<view class="" v-else>
				<view class="button width_70 send" hover-class="send_hover" @click="isAdd =true">添加好友</view>
			</view>
		</view>
		<u-modal :show="isDel" title="温馨提示" content="请确认要删除此好友?" width="500rpx" :showCancelButton="true"
			@cancel="isDel = false" @confirm="confirm_del" confirmColor="#6869a8">
		</u-modal>
		<u-modal :show="isAdd" title="好友验证消息" width="500rpx" :showCancelButton="true" @cancel="isAdd = false"
			@confirm="addFriend" confirmColor="#6869a8">
			<view>
				<u-input v-model="addFriendMessage" />
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//是否为好友
				isFriend: false,
				user: {},
				addFriendMessage: "我是" + this.$store.state.userInfo.username,
				isAdd: false,
				isDel: false
			};
		},
		methods: {
			addFriend() {
				this.$request.TokenRequest({
					url: "/friend/requestToAdd"
				}, {
					fromId: this.$store.state.userInfo.id,
					toId: this.user.id,
					message: this.addFriendMessage,
					isDeal: 0,
				}).then(res => {
					if (res.state === 200) {
						this.isAdd = false
						uni.showToast({
							icon: "success",
							title: "请求发送成功!"
						})
					} else {
						uni.showToast({
							icon: "none",
							title: res.message
						})
					}
				})
			},
			//返回
			back() {
				uni.navigateBack({})
			},
			//删除好友
			confirm_del() {
				this.$request.TokenRequest({
					url: "/friend/deleteFriend"
				}, {
					userId: this.user.id
				}).then(res => {
					if (res.state === 200) {
						uni.showToast({
							title: "删除好友成功",
							icon: "success"
						})
						this.isFriend = false
						this.isDel = false
					}
				})
			},
			//跳转到对应好友聊天窗口
			send() {
				// console.log('send')
				uni.navigateTo({
					url: "../chatWindow/chatWindow?id=" + this.user.id + "&name=" + this.user.username
				})
			},
			getSex(sex) {
				if (sex === 2) return "未设置"
				else if (sex === 0) return "男"
				else if (sex === 1) return "女"
			},
			getAge(date) {
				let start = new Date(date)
				let now = new Date()
				let sYear = start.getFullYear()
				let nYear = now.getFullYear()
				let sMonth = start.getMonth()
				let nMonth = now.getMonth()
				let sDay = start.getDate()
				let nDay = now.getDate()
				if (nMonth < sMonth) return nYear - sYear - 1
				else if (nMonth > sMonth) return nYear - sYear
				else {
					if (nDay < sDay) return nYear - sYear - 1
					else return nYear - sYear
				}
			},
			getBirth(date) {
				let d = new Date(date)
				let month = d.getMonth() + 1
				let day = d.getDate()
				return month + " 月 " + day + " 日"
			},
			getLocation(l) {
				if (l === "") return "未设置"
				else return l
			}
		},
		onLoad(option) {
			this.$request.TokenRequest({
				url: '/user/getUserInfoById'
			}, {
				id: option.id
			}).then(res => {
				this.user = res.data
			})
			this.$request.TokenRequest({
				url: '/friend/isFriend'
			}, {
				userId: option.id
			}).then(res => {
				if (res.data === true) this.isFriend = true
				else this.isFriend = false
			})
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #FFFFFF;
	}

	.infoCard {
		margin: 50rpx 40rpx;
		align-items: center;
		display: flex;

		.item {
			display: inline-block;
			margin: 0 30rpx;
			height: 180rpx;
		}

		.image {
			width: 180rpx;
			height: 180rpx;
			border-radius: 18rpx;
		}

		.username {
			display: inline-block;
			max-width: 420rpx;
			font-size: 50rpx;
			font-weight: bold;
			overflow-y: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.id {
			font-size: 33rpx;
		}
	}

	.info {
		display: flex;
		align-items: center;
		padding: 15rpx 0;
		font-size: 33rpx;

		.t {
			margin: 0 40rpx;
		}

		.unset {
			margin: 0 40rpx;
			color: #999999;
		}
	}

	.footer {
		// border-top: #858786 1px solid;
		position: fixed;
		bottom: 0;
		width: 100%;
		text-align: center;

		.width_30 {
			width: 30%;
		}

		.width_70 {
			width: 70%;
		}

		.button {
			font-size: 34rpx;
			margin: 18rpx 30rpx;
			padding: 20rpx 40rpx;
			display: inline-block;
			// sborder: #858786 1px solid;
			border-radius: 15rpx;
		}

		.delete {
			color: #FD5A75;
			background-color: #e2e2e2;
		}

		.delete_hover {
			background-color: #cccccc;
		}

		.send {
			border: none;
			color: #F5FFFF;
			background-color: #8b8de1;
		}

		.send_hover {
			background-color: #6869a8;
		}
	}
</style>
